import { getBannerList } from '@/src/api/Goods';
import React, { useEffect, useState } from 'react';
import { Image, StyleSheet, Text, TextInput, View } from 'react-native';
import Swiper from 'react-native-swiper';
interface ListItem {
  id: number | string; // 假设 id 可以是数字或字符串类型
  imgUrl: string; // 图片 URL 是字符串类型
}
export default function Banner() {
  const [inputText, setInputText] = useState('');
  const [list, setList] = useState<ListItem[]>([]);
  const [isReady, setIsReady] = useState(false);

  // 通过副作用处理异步请求数据
  useEffect(() => {
    // 获取商品列表数据
    const loadGetBannerList = async () => {
      const result = await getBannerList();
      console.log('result----->', result);
      setList(result.data.rows);
    };
    loadGetBannerList();
  }, []);

  // useEffect副作用控制自动播放行为
  useEffect(() => {
    // 判断如果获取到了list数据，设置isReady为true
    if (list.length > 0) {
      setIsReady(true);
    }
  }, [list]); // 依赖数组，只在list变化时执行

  if (!isReady) {
    return <Text>加载中...</Text>;
  }
  return (
    <View>
      {/* Swiper轮播图组件 */}
      {/* showsButtons显示左右按钮 */}
      {/* autoplay自动轮播 */}
      {/* autoplayTimeout自动轮播时间间隔 */}
      {/* paginationStyle控制指示器位置 */}
      {/* loop={true}循坏播放 */}
      <Swiper
        style={styles.wrapper}
        showsButtons={true}
        autoplay={true}
        loop={true}
        autoplayTimeout={3}
        removeClippedSubviews={false} // 关闭视图裁剪
        paginationStyle={{
          bottom: 10, // 控制指示器位置
        }}
        dot={
          <View
            style={{
              backgroundColor: 'rgba(0,0,0,0.2)',
              width: 8,
              height: 6,
              borderRadius: 0, // 设置为方形
              margin: 4,
            }}
          />
        }
        activeDot={
          <View
            style={{
              backgroundColor: '#FF3000',
              width: 30,
              height: 6,
              borderRadius: 0, // 设置选中时的方形
              margin: 4,
            }}
          />
        }
      >
        {list.map((item) => {
          return (
            <View key={item.id}>
              <Image style={styles.img} source={{ uri: item.imgUrl }}></Image>
            </View>
          );
        })}
      </Swiper>
      {/* onChangeText事件来读取用户的输入 */}
      <TextInput
        style={styles.input}
        value={inputText}
        onChangeText={setInputText}
        placeholder="搜索..."
      ></TextInput>
    </View>
  );
}

const styles = StyleSheet.create({
  wrapper: {
    height: 270,
  },
  img: {
    width: '100%',
    height: 270,
  },
  input: {
    borderWidth: 1,
    padding: 8,
    position: 'absolute',
    width: '90%',
    top: 20,
    left: 20,
    borderRadius: 20,
  },
});
